import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
import 'package:imperius_insights/modules/projects/view_model.dart';
import 'package:imperius_insights/portal/state/mobx/widget-state.dart';
import 'package:imperius_insights/portal/widgets/placeable_widget.dart';
import 'package:imperius_insights/treaty/palette.dart';
import 'package:imperius_insights/treaty/strings.dart';
import 'package:table_calendar/table_calendar.dart';

import 'viewmodels/colors.dart';
import 'widgets/marked_projects.dart';

class Screen extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return ScreenState();
  }
}

class ScreenState extends MobXWidgetState<Screen, ViewModel> {
  @override
  ViewModel createStore() {
    final scrollController = ScrollController();
    final vm = ViewModel(checkAndMakeAlarm: false);
    vm.setScrollController(scrollController);
    return vm;
  }

  @override
  Widget build(BuildContext context) {
    final calendarArea = Observer(
      builder: (_) {
        return TableCalendar(
          headerVisible: false,
          onDaySelected: viewModel.onSelectCalendarDay,
          initialCalendarFormat: CalendarFormat.twoWeeks,
          locale: 'zh_CN',
          calendarController: viewModel.calendarController,
          calendarStyle: CalendarStyle(
            markersPositionTop: 5,
            holidayStyle: TextStyle(color: Colors.green),
          ),
          builders:
              CalendarBuilders(singleMarkerBuilder: (context, date, event) {
            final project = viewModel.queryByPMO(event);
            return Opacity(
                opacity: 0.3,
                child: Container(
                    width: 30,
                    height: 30,
                    margin: const EdgeInsets.symmetric(horizontal: 0.3),
                    decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      color: stagingToColor(project.calcMilestoneStaging(date)),
                    )));
          }),
          events: viewModel.calendarEvents,
        );
      },
    );
    return Scaffold(
      appBar: AppBar(
        title: Text(Strings.project_tasks_calendar),
        backgroundColor: palette.theme,
      ),
      body: Column(
        children: <Widget>[
          SizedBox(height: 15),
          calendarArea,
          Divider(color: palette.divider, thickness: 0.5, height: 0),
          SizedBox(height: 8),
          Observer(
            builder: (_) {
              return Text(viewModel.selectedDayTasksTitle,
                  style: TextStyle(fontWeight: FontWeight.bold));
            },
          ),
          makeIndicateWidget(
              indicator: viewModel.projects,
              onRefresh: viewModel.refresh,
              contentBuilder: (context, indicator) {
                return Observer(
                    builder: (_) => MarkedProjects(
                        viewModel.markedProjects,
                        viewModel.calendarController.selectedDay,
                        viewModel.onTodoProjectTaped));
              })
        ],
      ),
    );
  }
}
